import React, { useState } from 'react';
import { NavBar, Image, Grid, Button } from 'antd-mobile';
import { LeftOutline, RightOutline } from 'antd-mobile-icons';
import { useNavigate, useParams } from 'react-router-dom';
import '../styles/booking.scss';

// 时间段接口
interface TimeSlot {
    time: string;
    available: number;
    status: 'available' | 'limited' | 'unavailable';
}

// 日期接口
interface DateOption {
    day: string;
    date: string;
    available: boolean;
}

const BookingPage: React.FC = () => {
    const navigate = useNavigate();
    const { doctorId } = useParams<{ doctorId: string }>();

    // 模拟医生数据
    const doctor = {
        id: doctorId || '1',
        name: '张医生',
        title: '主任医师',
        department: '心内科',
        hospital: '协和医院',
        fee: 150
    };

    // 可选日期数据
    const [dateOptions] = useState<DateOption[]>([
        { day: '明天', date: '07-20', available: true },
        { day: '周三', date: '07-21', available: true },
        { day: '周四', date: '07-22', available: true },
        { day: '周五', date: '07-23', available: true },
        { day: '周六', date: '07-24', available: true }
    ]);

    // 时间段数据
    const [timeSlots] = useState<TimeSlot[]>([
        { time: '08:00', available: 0, status: 'unavailable' },
        { time: '09:00', available: 0, status: 'unavailable' },
        { time: '10:00', available: 3, status: 'available' },
        { time: '11:00', available: 5, status: 'available' },
        { time: '14:00', available: 6, status: 'available' },
        { time: '15:00', available: 10, status: 'available' }
    ]);

    // 选中的日期和时间
    const [selectedDate, setSelectedDate] = useState<string>(dateOptions[0].day);
    const [selectedTime, setSelectedTime] = useState<string>('10:00');

    const handleBack = () => {
        navigate(`/doctor/${doctorId}`);
    };

    const handleDateSelect = (day: string) => {
        setSelectedDate(day);
    };

    const handleTimeSelect = (time: string) => {
        setSelectedTime(time);
    };

    const handleContinue = () => {
        // 导航到选择就诊人页面，并传递选择的日期和时间信息
        navigate(`/booking/patient/${doctorId}?date=${selectedDate}&time=${selectedTime}`);
    };

    return (
        <div className="booking-page">
            {/* 顶部导航栏 */}
            <NavBar
                className="nav-bar"
                backArrow={<LeftOutline />}
                onBack={handleBack}
            >
                预约挂号
            </NavBar>

            {/* 医生信息卡片 */}
            <div className="doctor-card">
                <div className="doctor-avatar">
                    <Image
                        src="https://via.placeholder.com/60"
                        width={60}
                        height={60}
                        fit="cover"
                        placeholder=""
                        alt={doctor.name}
                    />
                </div>
                <div className="doctor-info">
                    <h3 className="doctor-title">{doctor.name} · {doctor.title}</h3>
                    <div className="doctor-dept">{doctor.department}</div>
                    <div className="doctor-hospital">{doctor.hospital}</div>
                </div>
            </div>

            {/* 选择就诊时间 */}
            <div className="booking-section">
                <h3 className="section-title">选择就诊时间</h3>
                <div className="date-selector">
                    <Grid columns={3} gap={8}>
                        {dateOptions.slice(0, 3).map((date, index) => (
                            <Grid.Item key={index}>
                                <div
                                    className={`date-item ${selectedDate === date.day ? 'selected' : ''}`}
                                    onClick={() => handleDateSelect(date.day)}
                                >
                                    <div className="day">{date.day}</div>
                                    <div className="date">{date.date}</div>
                                </div>
                            </Grid.Item>
                        ))}
                    </Grid>

                    <div className="date-pagination">
                        <span className="prev-arrow">◄</span>
                        <div className="pagination-indicator"></div>
                        <span className="next-arrow">►</span>
                    </div>
                </div>
            </div>

            {/* 选择时段 */}
            <div className="booking-section">
                <h3 className="section-title">选择时段</h3>
                <div className="time-selector">
                    <Grid columns={3} gap={8}>
                        {timeSlots.map((slot, index) => (
                            <Grid.Item key={index}>
                                <div
                                    className={`time-item ${slot.status} ${selectedTime === slot.time ? 'selected' : ''}`}
                                    onClick={() => slot.status !== 'unavailable' && handleTimeSelect(slot.time)}
                                >
                                    <div className="time">{slot.time}</div>
                                    <div className="availability">
                                        {slot.status === 'unavailable'
                                            ? '已约满'
                                            : `剩余${slot.available}个`}
                                    </div>
                                </div>
                            </Grid.Item>
                        ))}
                    </Grid>
                </div>
            </div>

            {/* 底部操作栏 */}
            <div className="booking-footer">
                <div className="fee-info">
                    <span className="fee-label">¥ {doctor.fee}</span>
                </div>
                <Button
                    className="confirm-button"
                    color="primary"
                    onClick={handleContinue}
                >
                    确认预约
                </Button>
            </div>
        </div>
    );
};

export default BookingPage; 